<template>
  <section class="settting-wrapper upload-logo-wrapper">
    <header class="setting-header">
      <h4 class="title">LOGO配置</h4>
      <span class="detail">请上传企业LOGO或修改文字</span>
    </header>

    <section class="setting-body">
      <img src="../../../assets/img/logo_settiing_bg.png" alt="">
      <div class="upload-box">
        <div class="uploaded-img-box">
          <i class="marking marking-top">138px</i>
          <i class="marking marking-right">70px</i>
          <el-upload
            v-show="logoList.length > 0"
            class="picture-card-box"
            :class="{'is-uploaded': logoList.length > 0}"
            action=""
            list-type="picture-card"
            :limit="2"
            :file-list="logoList"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :auto-upload="false">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="picture-card-box" v-show="logoList.length === 0">
            <img :src="originLogoUrl" alt="">
          </div>
        </div>
        <el-upload
          class="picture-btn-box"
          action=""
          :limit="2"
          list-type="picture"
          :file-list="logoList"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadLogo">点击上传</el-button>
          <el-button v-if="originLogoUrl" size="small" type="primary" @click="handleRemove">重置</el-button>
          <div slot="tip" class="el-upload__tip">为了保证效果，尽量选择上传png文件（没有底色）且不超过900kb</div>
        </el-upload>
      </div>

      <el-form :model="platform" ref="platform" class="platform-name-box" label-width="100px">
        <!-- <span class="item-title">文字替换</span> -->
        <el-form-item label="文字替换" class="item-input-box" prop="name" :rules="[{required: true, message: '不能为空', trigger: 'blur'}]">
          <el-input v-model="platform.name" class="item-input" :placeholder="logoObj.platformName" @blur="savePlatFormName" @keyup.enter.native="savePlatFormName"></el-input>
        </el-form-item>
      </el-form>
    </section>
  </section>
</template>

<script>
import { mapMutations } from 'vuex'
import theme from '../../../mixins/theme.js'
export default {
  name: 'uploadLogo',

  mixins: [theme],

  data () {
    return {
      logoList: [],
      logoImg: null,
      originLogoUrl: '',
      platform: {
        name: ''
      }
    }
  },

  computed: {
    logoObj () {
      let obj = this.$store.state.logoObj
      this.platform.name = obj.platformName
      this.originLogoUrl = obj.logoImg
      // this.logoList = [{url: obj.logoImg}]
      return obj
    }
  },

  methods: {
    ...mapMutations({
      setLogoObj: 'setLogoObj'
    }), 
    //删除service上的logo图片
    handleRemove(file, fileList){
      let self = this
      if(!self.originLogoUrl){
        self.logoList = []
        self.logoImg = null
        return
      }
      API.fetchPost('/skin/logo/resetPompLogo', {})
        .then(data => {
          self.logoList = []
          self.logoImg = null
          self.showToast('操作成功！', 1, 1500)
          self.getLogoObj()
        }, err => {
          console.log(err)
        })
    },
    handleChange (file, fileList) {
      let self = this
      if (fileList.length > 0) {
        this.logoList = [file]
        if (file.raw) {
          let reader = new FileReader()
          reader.readAsDataURL(file.raw)
          reader.onload = function (e) {
            let _res = this.result
            self.logoImg = _res.split(';base64,')[1]
          }
        }
      } else {
        this.logoList = []
      }
    },
    uploadLogo () {
      let self = this
      if(self.logoList.length>0){
        let file = self.logoList[0]
        let name = file.name
        let params = {
          logoImgName: name,
          logoImg: self.logoImg
        }
        API.fetchPost('/skin/logo/save.do', params)
          .then(data => {
            self.showToast('操作成功！', 1, 1500)
            self.logoList = []
            self.getLogoObj()
          }, err => {
            console.log(err)
        })
      }else{
        self.logoList = []
        self.showToast('请先选择图片!', 2)
      }
    },

    // /skin/platformName/save
    savePlatFormName () {
      let self = this
      let Val = this.platform.name
      if (Val && Val !== this.logoObj.platformName) {
        let params = {
          platformName: Val
        }
        API.fetchPost('skin/platformName/save', params)
          .then(data => {
            console.log(data)
            let _obj = JSON.parse(JSON.stringify(self.logoObj))
            _obj.platformName = Val
            this.setLogoObj(_obj)
          }, err => {
            console.log(err)
          })
      }
    }
  }
}
</script>

<style lang="less" scoped>
@grey99: #999999;
@lightBorderColor: #d7dce2;
@blueBorder: #5694DB;
.setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;

  .title {
    display: inline-block;
    margin-right: 18px;
  }

  .detail {
    color: @grey99;
  }
}

.setting-body {
  position: relative;
  img {
    width: 100%;
  }
}

.upload-box {
  position: absolute;
  top: 125px;
  left: 200px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  padding-left: 8px;
  min-height: 130px;
}

.uploaded-img-box {
  position: relative;
}

.picture-card-box {
  width: 138px;
  height: 70px;
  border: 1px solid @lightBorderColor;
  border-radius: 8px;


  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}

.picture-btn-box {
  margin-left: 80px;
}

.marking {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: @grey99;
}

.marking-top {
  top: -22px;
  left: 0;
  right: 0;
  height: 15px;
  border-left: 1px solid @lightBorderColor;
  border-right: 1px solid @lightBorderColor;

  &::before, &::after {
    content: '';
    width: 35px;
    height: 1px;
    background-color: @lightBorderColor;
  }

  &::before {
    margin-right: 10px;
  }
  &::after {
    margin-left: 10px;
  }
}
.marking-right {
  right: -30px;
  top: 0;
  bottom: 0;
  width: 15px;
  flex-direction: column;
  border-top: 1px solid @lightBorderColor;
  border-bottom: 1px solid @lightBorderColor;


  &::before, &::after {
    content: '';
    width: 1px;
    height: 13px;
    background-color: @lightBorderColor;
  }

  &::before {
    margin-bottom: 8px;
  }
  &::after {
    margin-top: 8px;
  }
}

.platform-name-box {
  position: absolute;
  top: 302px;
  left: 104px;
  display: flex;
  align-items: center;

  .item-title {
    display: inline-block;
    white-space: nowrap;
    margin-right: 20px;
    font-size: 16px;
  }
}
</style>

<style lang="less">
.platform-name-box.el-form {
  .el-form-item.is-required {
    .el-form-item__label {
      &::before {
        content: '';
      }
    }
  }
}

.upload-logo-wrapper {
  .el-upload--picture-card, .el-upload-list--picture-card .el-upload-list__item {
    width: 138px;
    height: 70px;
    line-height: 70px;
  }

  .el-upload-list--picture-card .el-upload-list__item .el-icon-check {
    position: absolute;
    top: 0;
    right: 15px;
  }

  .picture-card-box {
    &.is-uploaded {
      .el-upload {
        display: none;
      }
    }
    &:not(.is-uploaded) {
      .el-upload-list {
        display: none;
      }
    }

    .el-upload-list--picture-card .el-upload-list__item {
      width: 138px;
      height: 70px;
      margin-bottom: 0;
    }
  }

  .picture-btn-box {
    .el-upload-list {
      display: none;
    }
  }
}
</style>
